<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar
			:placeholder="true"
			title="餐谱列表"
			
			:isBack="true"
			:titleBold="true"
			backIconSize="30"
			:background="{ background: '#f8f8f8' }"
			:border-bottom="false"
		>
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" @click.native.stop="goBack" size="24"></u-icon>
				<u-icon v-if="$isPermission('foodMenu_add')"  name="plus" size="24" @click.native.stop="add" ></u-icon>
			</view>
			
		</u-navbar>
		 <!-- #endif --> 
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar
			:placeholder="true"
			title="餐谱列表"
			:autoBack="true"
			:isBack="true"
			:titleBold="true"
			backIconSize="30"
			:background="{ background: '#f8f8f8' }"
			:border-bottom="false"
		>
		<view class="u-nav-slot" slot="left">
			<u-icon name="arrow-left" @click.native.stop="goBack" size="24"></u-icon>	
		</view>
			<view class="u-nav-slot" slot="right">
				<u-icon  name="plus" v-if="$isPermission('foodMenu_add')" size="24" @click.native.stop="add" ></u-icon>
			</view>
		</u-navbar>
		 <!-- #endif -->
		<view class="banner" v-for="(value, key) in foodsList" :key="key" @click="goDetail(value)">
			<u--image width="100%" height="200px" :radius='5' :lazy-load="true" mode="aspectFill" v-if="value.foodsImg[0]" :showLoading="true" :src="value.foodsImg[0]"  ></u--image>
			<view class="img-title">
				<view class="">
					<text>{{ value.foodsAuthor }}</text>
					<text class="fabiao">发表于</text>
					<text>{{ value.createTime }}</text>
				</view>
				<view class="">{{ value.foodsType | foodstype(footstypelist) }}</view>
			</view>
			<!-- <view class="img-Detail">
				{{value.foodsDetail}}
			</view> -->
		</view>
		<u-loadmore :status="status" />
		<!-- <graceLoading :loadingType="loadingType"/> -->
	</view>
</template>

<script>
	import easyLoadimage from '../components/easy-loadimage/easy-loadimage.vue';
	import {
		saveFoods,
		updateFoods,
		pageFoods
	} from '@/api/Foods.js';
	export default {
		name: 'news',
		data() {
			return {
				banner: {},
				pageMore: true,
				loadingType: 0,
				graceFullLoading: true,
				params: {
					pageNum: 1,
					pageSize: 10
				},
				pageMore: true,
				foodsList: [],
				status: 'loadmore',
				footstypelist: [],
				imglist: [],
				scrollTop: 0
			};
		},
		onPageScroll({
			scrollTop
		}) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			this.scrollTop = scrollTop;
		},
		components: {
			easyLoadimage
		},
		onReachBottom: function() {
			this.loadMoreFunc();
		},
		filters: {
			foodstype: (val, arr) => {
				console.log('arrrrrrrrrr', arr);
				var temp = arr.filter(e => {
					return e.value == val;
				});
				if (temp.length <= 0) {
					return '';
				}
				return temp[0].name;
			}
		},
		onLoad() {
			this.initParams();
			this.getFoods();
			this.foodstype();
		},

		methods: {
			goBack(){
				uni.switchTab({
					url: '/pages/tabbar/index/index'
				});
			},
			add() {
				console.log('添加')
				uni.navigateTo({
					url: 'publish'
				});
			},
			//页面返回初始化数据
			initParams() {
				this.foodsList = [];
				// this.loadingType = 4;
				this.params.pageNum = 1;
				this.pageMore = true;
			},
			goDetail(e) {
				var json = JSON.stringify(e);
				if (json && json != '{}') {
					uni.navigateTo({
						url: 'detail?detailDate=' + encodeURIComponent(json)
					});
				}
			},
			getFoods() {
				pageFoods(this.params).then(
					res => {
						this.pathRes(res.data);
					},
					err => {
						this.$api.showTip('查询错误');
						this.loadingType = 0;
					}
				);
			},
			pathRes(data) {
				uni.showLoading({
					title: '正在加载...',
					mask: true
				});
				if (data.code == 0) {
					uni.hideLoading();

					if (data.data.list.length == 0) {
						// this.loadingType = 3;
						this.status = 'nomore';
						console.log('显示数据', this.status);
						return;
					}
					if (data.data.isLastPage) {
						this.pageMore = false;
						this.foodsList = this.foodsList.concat(data.data.list);
						// this.loadingType = 2;
						this.status = 'nomore';
					} else {
						if (data.data.isFirstPage) {
							this.foodsList = data.data.list;
						} else {
							this.foodsList = this.foodsList.concat(data.data.list);
							console.log('不是第一页', this.foodsList);
						}
						this.params.pageNum++;
						// this.loadingType = 0;
					}
					this.foodsList.map(it => {
						if (it.foodsImg) {
							it.foodsImg = JSON.parse(it.foodsImg);
						}

						return it;
					});
				} else {
					this.$api.showTip(res.data.msg);
				}
			},
			formattime(time) {
				// let ttDate = time;
				let ttDate = time.replace(/(\d{4}).(\d{1,2}).(\d{1,2})/gm, '$1年$2月$3日');
				return ttDate;
			},
			foodstype() {
				this.footstypelist = this.$util.getdictionary('餐类');
			},
			loadMoreFunc: function() {
				if (!this.pageMore) {
					return;
				}
				this.getFoods(this.params);
			},
			swiperchange: function(e) {
				console.log(e);
			},
			btnClick() {
				uni.navigateTo({
					url: 'foodMenuAdd'
				});
			},
			goback() {
				uni.navigateBack();
			}
		}
	};
</script>

<style scoped lang="less">
	/deep/.u-nav-slot{
		display: flex;
	}
	/deep/.uicon-plus{
		margin-left: 90rpx;
	}
	.banner {
		overflow: hidden;
		position: relative;
		background-color: #ffffff;
		margin: 20rpx 15rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 5rpx;
	}
	
	.grace-padding-p {
		padding: 30rpx;
	}

	.img-radius-hw {
		border-radius: 14rpx;
		background-position: center center;
		width: 100%;
		height: 350rpx;
	}

	.img-title {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		margin-top: 26rpx;
	}

	.fabiao {
		padding: 0 10rpx;
	}

	.grace-title {
		padding: 0 !important;
		line-height: 2em;
	}

	.img-Detail {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	
</style>